<template>
    <div class="createPost-container">
        <el-form class="form-container" style="width:600px; margin-top:20px">
            <div class="createPost-main-container">
                <div style="padding: 10px 0px 20px 20px">
                    绑定手机端：<label v-if="store && store.uid > 0">已绑定</label><label v-else>未绑定</label>
                </div>
                <el-form ref="mobile_form" :rules="rules_mobile" :model="temp_mobile" label-position="left" label-width="70px" style="width: 570px; margin-left: 50px">
                    <el-form-item style="margin-bottom: 40px;" label="手机号:" prop="mobile">
                        <el-input v-model="temp_mobile.mobile" type="number" :rows="1" class="article-textarea" autosize placeholder="请输入手机号" style="width:400px" />
                        <el-button type="primary" style="margin-left:10px" @click="modifyMobile()">绑定</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-form>
        <!-- <div>
            <label v-if="store.withdraw_account_type !== null && store.withdraw_account_type !== '' && store.withdraw_account_type !== undefined">已绑定提现账户：{{ store.withdraw_account }}</label>
            <div v-else>
                <el-button type="danger" @click="bindWithdraw">绑定当前手机号微信为提现账户</el-button>
            </div>
        </div> -->
        <div>
            <label>绑定公众号微信openid：{{ mp_fans && mp_fans.openid != null ? mp_fans.openid : '尚未绑定' }}</label>
            <div style="margin: 20px 20px 0px 20px">
                <vue-qr v-if="store.uid > 0" :text="qrcode.value" :size="200" :margin="0" />
            </div>
            <div style="color: grey;font-size: 12px">微信扫码绑定，绑定前请先关注公众号！</div>
        </div>
    </div>
</template>

<script>
import { bindAccount } from '@/pay/api/withdraw'
import { bindUser } from '@/shop/api/auth'
import { fetch as fetchStore } from '@/shop/api/store'
import VueQr from 'vue-qr'

export default {
    components: { VueQr },
    data() {
        const validateRequire = (rule, value, callback) => {
            var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/
            if (!myreg.test(value)) {
                this.$message({
                    message: rule.message,
                    type: 'error'
                })
                callback(new Error())
            } else {
                callback()
            }
        }
        return {
            id: 0,
            store: {},
            temp_mobile: {
                mobile: ''
            },
            rules_mobile: {
                mobile: [{ validator: validateRequire, message: '请输入有效手机号', trigger: 'blur' }]
            },
            loading: false,
            tempRoute: {},
            qrcode: {
                value: ''
            },
            mp_fans: {}
        }
    },
    computed: {

    },
    created() {
        this.id = this.$route.query.id
        this.fetchData()
    },
    methods: {
        fetchData() {
            let self = this
            const query = { id: this.id }
            fetchStore(query).then((response) => {
                this.store = response.data
                // if (this.store.uid > 0) {
                //     getPid().then(res => {
                //         let pid = res.data.pid
                //         this.qrcode.value = ((document.location.protocol === 'https:') ? 'https' : 'http') + '://' + window.location.host + '/mobile#/ucenter/pages/bind/mp?uid=' + this.store.uid + '&pid=' + pid
                //     })
                    
                //     fetchUser({
                //         uid: this.store.uid
                //     }).then(res => {
                //         this.temp_mobile.mobile = res.data.mobile
                //     })

                //     fansOfUser({
                //         uid: this.store.uid,
                //         platform: 'mp'
                //     }).then(res => {
                //         this.mp_fans = res.data
                //     })
                // }

                // Just to simulate the time of the request
                setTimeout(() => {
                    this.loading = false
                }, 1.5 * 1000)
            })
        },
        modifyMobile() {
            this.$refs.mobile_form.validate(valid => {
                if (valid) {
                    const data = {
                        store_id: this.id,
                        mobile: this.temp_mobile.mobile
                    }
                    bindUser(data).then(res => {
                        this.store.uid = res.data.uid
                        this.$message({
                            message: '绑定成功！',
                            type: 'success'
                        })
                    })
                } else {
                    console.log('mobile error')
                }
            })
        },
        bindWithdraw() {
            this.$alert('确认绑定', {
                confirmButtonText: '确定',
                callback: action => {
                    if (action == 'confirm') {
                        bindAccount({
                            store_id: this.store.id
                        }).then(res => {
                            this.$message({
                                message: '绑定成功！',
                                type: 'success'
                            })
                            this.fetchData()
                        })
                    }
                }
            });
        }
    }
}
</script>
